@extends('admin.layout.layout')
@section('content')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="L_cate_pid" class="layui-form-label">
                        <span class="x-red">*</span>分类</label>
                    <div class="layui-input-inline">
                        <select name="cate_id" lay-verify="required">
                            <option value="">请选择分类</option>
                            @foreach($cate as $v)
                                <option value="{{$v->cate_id}}">{{$v->cate_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>选择文章分类
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_art_title" class="layui-form-label">
                        <span class="x-red">*</span>文章标题</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_art_title" name="art_title" lay-verify="required" autocomplete="off"
                               class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label for="L_art_editor" class="layui-form-label">
                        文章作者
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_art_editor" name="art_editor" lay-verify="required" autocomplete="off"
                               class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label for="L_cate_title" class="layui-form-label">
                        缩略图
                    </label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="art_thumb">选择图片</button>
                        <button type="button" class="layui-btn" id="up_art">上传图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 400px;">
                            预览图：
                            <div class="layui-upload-list " id="art_thumb_yl"></div>
                        </blockquote>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_art_tag" class="layui-form-label">
                        文章标签
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_art_tag" name="art_tag" autocomplete="off" class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label for="L_art_description" class="layui-form-label">
                        文章描述
                    </label>
                    <div class="layui-input-block">
                        <textarea name="art_description" lay-verify="required" id="L_art_description"
                                  placeholder="请输入文章描述" class="layui-textarea"></textarea>

                    </div>
                    <div class="layui-form-item" style="margin-top: 30px">
                        <label for="L_art_content" class="layui-form-label">
                            文章内容
                        </label>
                        <div class="layui-input-block">
                            <textarea name="art_content" lay-verify="required" id="L_art_content" placeholder="请输入文章内容"
                                      class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-form-item" style="margin-top: 30px">
                            <label for="L_repass" class="layui-form-label"></label>
                            <button class="layui-btn" lay-filter="add" id="sub_img" lay-submit="">增加</button>
                        </div>
            </form>
        </div>
    </div>
    <script>layui.use(['form', 'layer', 'jquery', 'upload'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer,
                    upload = layui.upload;
                var art_thumb_url = [];
                //多图片上传
                upload.render({
                    elem: '#art_thumb'
                    , field: 'file'
                    , accept: 'images'
                    , acceptMime: 'image/*'
                    , url: '{{url("/admin/article/imgupload")}}'
                    , data: {'_token': '{{csrf_token()}}'}
                    , multiple: true
                    , auto: false
                    , bindAction: '#up_art'
                    , choose: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#art_thumb_yl').append('<img src="' + result + '" alt="' + file.name + '" style="width: 92px;height: 92px;margin: 0 10px 10px 0;">')
                        });
                    }
                    , done: function (res) {
                        var html = '<input type="hidden" class="img" value="' + res.data.src + '">';
                        $('#art_thumb_yl').append(html);
                    }

                });
                //监听提交
                form.on('submit(add)', function (data) {
                    var img_arr = [];
                    $(".img").each(function(){
                        img_arr.push($(this).val())
                    });
                    console.log(img_arr);
                    $.post('{{url("admin/article")}}'
                        , {
                            '_token': '{{csrf_token()}}',
                            cate_id: data.field.cate_id,//分类栏目
                            art_title: data.field.art_title,//文章标题
                            art_editor: data.field.art_editor,//文章作者
                            art_thumb: img_arr,//缩略图
                            art_tag: data.field.art_tag,//文章标签
                            art_description: data.field.art_description,//文章描述
                            art_content: data.field.art_content,//文章内容
                        }, function (res) {
                            if (res.status == 0) {
                                //发异步，把数据提交给php
                                layer.alert(res.message, {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        xadmin.close();

                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.msg(res.data[0]);
                            }
                        }, 'json');


                    return false;
                });

            });</script>
@endsection